<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-'+ theme.themeColor">
			<block slot="backText">返回</block>
			<block slot="content">申请售后</block>
		</cu-custom>
		<view class="bg-white  margin-xs radius padding-sm">
			<view class="text-bold">
				退款商品
			</view>
			<view class="flex">
				<view class="basis-xs margin-xs">
					<view class="cu-avatar xl" :style="'background-image:url(' + orderItem.picUrl + ')'">
					</view>
				</view>
				<view class="basis-xl margin-xs">
					<view>
						{{orderItem.spuName}}
					</view>
					<view v-if="orderItem.specsInfo" class="text-gray">
						{{orderItem.specsInfo}}
					</view>
					<view class="flex justify-between align-end padding-top-xs">
						<view class="text-bold text-df text-price" :class="'text-'+ theme.themeColor">
							{{orderItem.paymentPrice}}
						</view>
						<view> x{{orderItem.buyQuantity}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white  margin-xs radius padding-sm">
			<view class="text-bold">
				服务类型
			</view>
			<radio-group class="block" @change="statusChange">
				<view class="cu-list menu text-left">
					<view class="cu-item">
						<label class="flex justify-between align-center flex-sub">
							<view class="flex-sub"> <text class="cuIcon-refund text-grey"></text>
								<text class="text-black">我要退款（无需退货）</text>
							</view>
							<radio class="round" :class="orderRefund.status=='1'?'checked':''"
								:checked="orderRefund.status=='1'?true:false" value="1"></radio>
						</label>
					</view>
					<view class="cu-item">
						<label class="flex justify-between align-center flex-sub">
							<view class="flex-sub"><text class="cuIcon-deliver text-grey"></text>
								<text class="text-black">我要退货退款</text>
							</view>
							<radio class="round" :class="orderRefund.status=='2'?'checked':''"
								:checked="orderRefund.status=='2'?true:false" value="2"></radio>
						</label>
					</view>
				</view>
			</radio-group>
		</view>
		<view class="bg-white margin radius padding-sm" v-if="orderRefund.status">
			<view class="text-bold">
				退款信息
			</view>
			<view class="margin-tb-sm">
				<view class="cu-form-group">
					<view class="title">退款金额</view>
					<view class="text-red text-price">
						{{orderItem.paymentPrice}}
					</view>
				</view>
				<view class="cu-form-group align-start">
					<view class="title">退款原因</view>
					<textarea maxlength="-1" @input="textareaInput" placeholder="请输入退款原因"></textarea>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar padding-lr foot" style="display: block !important">
			<button class="cu-btn shadow-blur block margin-sm round bottom-btn" :class="'bg-'+ theme.themeColor"
				@tap="onSub">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getById as getOrderItemById
	} from '@/api/orderitem.js';
	import {
		addObj
	} from '@/api/orderrefund.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.theme,
				orderItem: {},
				orderRefund: {
					status: ''
				}
			}
		},
		onLoad(option) {
			getApp().initPage().then(res => {
				this.orderRefund.orderItemId = option.orderItemId
				this.getDetail(option.orderItemId);
			})
		},
		methods: {
			getDetail(id) {
				getOrderItemById(id).then(res => {
					this.orderItem = res.data
				})
			},
			statusChange(e) {
				this.orderRefund.status = e.detail.value;
			},
			textareaInput(e) {
				this.orderRefund.refundReason = e.detail.value
			},
			onSub() {
				if (!this.orderRefund.status) {
					uni.showToast({
						title: '请选择服务类型',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				if (!this.orderRefund.refundReason) {
					uni.showToast({
						title: '请输入退款原因',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				let _this = this;
				uni.showModal({
					content: '确认提交申请吗？',
					cancelText: '我再想想',
					success(res) {
						if (res.confirm) {
							addObj(_this.orderRefund).then(res => {
								uni.navigateBack({
									success: () => {
										let page = getCurrentPages().pop();
										if (page) {
											page.onLoad(page.options); //执行上个页面的方法
										};
									}
								});
							});
						}
					}
				});
			}
		},
	}
</script>

<style>
</style>
